<style>
  /* 覆盖样式 */
  .hl-merge-checkbox-button {
    margin: 0
  }

  .hl-merge-checkbox-button.is-inline {
    display: block
  }

  main {
    margin: 0 24px 20px;
  }

  .icon-Gm-calendar:before {
    top: 0
  }

  .hl-radio-container {
    line-height: 34px;
  }

  .GDZJ .hl-radio-container .hl-radio-inner {
    left: -15px
  }

  .calendar_container {
    width: 140px;
  }

  .page_title {
    line-height: 56px;
    font-size: 16px;
    color: #999;
    border-bottom: 1px solid #F2F2F2;
  }

  .content_container {
    padding: 16px 0;
    font-size: 14px;
  }

  .content_header {
    margin-bottom: 25px;
  }

  .content_header>section {
    display: flex;
    align-items: center;
  }

  .content_header>section p {
    width: 80px;
    color: #666;
  }

  .content_body>div {
    margin-bottom: 30px;
  }

  .mb-12 {
    margin-bottom: 12px;
  }

  .section_title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
  }

  .section_title>span {
    color: #929BA8
  }

  .section_title>div {
    color: #565E99;
    display: flex;
    align-items: center;
    cursor: pointer;
  }

  .section_title>div>b {
    margin-right: 8px
  }

  input[type=number] {
    -moz-appearance: textfield;
  }

  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .entry_list li {
    border-right: 1px solid #e5e5e5;
  }

  .entry_list li:last-child {
    border-right: none
  }

  .JTZJ input,
  .MZQ input,
  .ZQXFX input,
  .LSFX input,
  .YCXFX input {
    width: 100%;
    line-height: 38px;
    border: none;
    outline: none;
    box-shadow: none;
    text-align: center;
  }

  .iconHover {
    position: relative;
  }

  .hoverText {
    display: none;
    position: absolute;
    z-index: 9999;
    left: -185px;
    top: 6px;
    width: 378px;
    flex-direction: column;
    align-items: center;
    padding: 16px 10px;
    color: #999;
  }

  .hoverText div {
    position: absolute;
    display: inline-block;
    top: 11px;
    left: 185px;
    width: 0;
    height: 0px;
    content: '';
    border-style: solid;
    border-width: 6px;
    border-color: #fff #fff transparent transparent;
    transform: rotate(314deg);
    box-shadow: 2px -2px 2px #ccc;
    color: #999;
  }

  .hoverText ul {
    width: 100%;
    padding: 8px 18px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 0 4px 2px rgba(200, 200, 200, .75);
  }

  .iconHover:hover .hoverText {
    display: flex;
  }

  .hl-checkbox {
    line-height: 15px;
  }

  .hl-radio {
    margin-right: 15px;
  }

  .instro li {
    display: flex;
    flex-direction: column;
  }

  .hl-checkbox {
    line-height: 15px;
  }

  .textOH {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
  }

  .insertbox input {
    width: 76px;
    margin-right: 10px;
  }

  .dy-flex {
    display: flex;
    align-items: center;
  }

  .entry-container {
    border: 1px solid rgba(232, 229, 226, 1);
    margin-bottom: 10px;
  }

  .entry-container:hover {
    border: 1px solid #565E99;
  }

  .entry-header {
    height: 46px;
    background: #F2F2F2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;

  }

  .entry-header ul {
    display: flex;
    align-items: center;
  }

  .entry-header ul input {
    width: 76px;
    height: 34px;
    background: #fff;
    border-radius: 4px;
    color: #EA8E6F;
    border: 1px solid rgba(229, 229, 229, 1);
    margin-left: 10px;
  }

  .entry-header ul li {
    display: flex;
    align-items: center;
  }

  .entry-body {
    background: #fff;
    height: 78px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .entry-body ul {
    display: flex;
    align-items: center
  }

  .entry-body ul input {
    width: 96px;
    margin-right: 10px;
  }

  .entry-container {
    border-radius: 4px;
    overflow: hidden;
  }

  .color_Orange {
    color: #EA8E6F
  }

  .orangeBlock {
    display: inline-block;
    width: 12px;
    height: 2px;
    background: #999;
    margin: 0 15px;
  }

  .mark-container {
    width: 480px;
    background-color: #fff;
    border-radius: 4px;
    position: relative;
  }

  .mark-container .title {
    font-size: 16px;
    line-height: 44px;
    text-align: center;
  }

  .mark-container .close {
    position: absolute;
    right: 0;
    top: 0;
    width: 44px;
    height: 44px;
    text-align: center;
    line-height: 44px;
  }

  .templateList {
    width: 780px;
    background: #fff;
    box-shadow: 0px 0px 6px 0px rgba(136, 136, 136, 0.75);
    border-radius: 6px;
  }

  .templateList_title {
    height: 46px;
    text-align: center;
    line-height: 46px;
  }

  .templateList_content {
    background: #F9F9F9;
    padding: 24px 0px 77px 16px;
  }

  .TC_header {
    color: #666;
    font-size: 14px;
    padding-bottom: 20px;
    border-bottom: 1px solid #E8E8E8;
    padding-right: 20px;
    margin-bottom: 18px;
  }

  .TC_header>div {
    display: flex;
    justify-content: space-between;
    align-items: center
  }

  .TC_header>ul {
    display: flex;
    align-items: center;
  }

  .TC_header>ul>li {
    display: flex;
    align-items: center;
    margin-right: 50px;
  }

  .TC_mask {
    display: none;
    position: absolute;
    z-index: 9;
    width: 140px;
    height: 36px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 4px;
    /* text-align: center; */
    text-indent: 47px;
    line-height: 36px;
    color: #fff;
    cursor: pointer;
  }

  .check-auth {
    display: inline-block;
    width: 13px;
    height: 13px;
    position: relative;
    border: 1px solid #666;
    border-radius: 4px;
    margin-right: 10px;
  }

  .check-auth-active {
    display: inline-block;
    background-image: url(assets/images/Check.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 8px;
    background-color: #44B548;
    width: 13px;
    height: 13px;
    border: 1px solid #44B548;
    border-radius: 4px;
    margin-right: 10px;
  }

  .check-item {
    display: inline-block;
    width: 16px;
    height: 16px;
    position: absolute;
    z-index: 99;
    background: #fff;
    border-radius: 8px;
    right: 10px;
    top: 9px;
  }

  .check-item-active {
    display: inline-block;
    background-image: url(assets/images/Check.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 8px;
    background-color: #5e67a5;
    width: 13px;
    height: 13px;
    border: 1px solid #5e67a5;
    border-radius: 4px;
    margin-right: 10px;
  }

  .tem-item {
    width: 140px;
    height: 36px;
    background: #44B548;
    box-shadow: 1px 1px 2px 0px rgba(163, 184, 198, 0.5);
    border-radius: 4px;
    margin: 0 10px 10px 0;
    overflow: hidden;
    position: relative;
    line-height: 36px;
    text-indent: 10px;
    color: #fff;
    padding-right: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
  }

  .tem-item:hover .TC_mask {
    display: block
  }

  .tem-item:hover .TC_text {
    -webkit-filter: blur(3px);
  }

  .tem-item-box {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
  }

  .TC_selected_active {
    color: #44B548
  }

  .TC_selected_icon {
    position: absolute;
    z-index: 9999;
    right: 12px;
    top: 12px;
    font-size: 12px;
  }

  .templateList_footer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 56px;
  }

  .TC_close_icon {
    float: right;
    margin: 15px 20px 0 0;
  }


  .mzqStyle ul {
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 40px;
  }

  .alert-mes {
    font-size: 12px;
    margin-left: 10px;
    display: inline-block;
    width: 250px;
  }

  .oneBut .yes {
    width: 100% !important;
  }

  #specialbox1 input {
    text-align: left !important;
  }

  .mr-unm {
    text-indent: 20px;
  }
</style>
<main id="discountCalculation">
  <p class="page_title">合同管理-折扣计算</p>
  <div class="content_container">
    <!-- 录入时间 -->
    <div class="content_header">
      <section class="mb-12">
        <div class="dy-flex" style="align-items: center;margin-right: 60px;">
          <p>分摊费项：</p>
          <div class="calendar_container">固定租金</div>
        </div>
      </section>
      <section class="mb-12">
        <div class="dy-flex" style="align-items: center;margin-right: 60px;">
          <p>租赁期限：</p>
          <div>
            {{beginDateCopy}} 至 {{endDateCopy}}
          </div>
        </div>
      </section>
      <section class="mb-12">
        <div class="dy-flex" style="align-items: center;margin-right: 60px;">
          <p>折扣周期：</p>
          <div class="calendar_container">
            <web-calendar type="primary" v-model="beginDate" :afterdate="endDate" @change="checkDate('b')">
            </web-calendar>
          </div>
          <span style="margin:0 10px">-</span>
          <div class="calendar_container">
            <web-calendar type="primary" v-model="endDate" :beforedate="beginDate" @change="checkDate('e')">
            </web-calendar>
          </div>
        </div>
      </section>
    </div>
    <!-- 各种费项 -->
    <div class="content_body">
      <!-- 固定租金 -->
      <div class="GDZJ">
        <div class="section_title">
          <span>固定租金</span>
        </div>
        <div class="ct-rd-wrap">
          <div class="ct-rd-tit">
            <span v-if="getCtPrevData.contactType.active == 'ER'">计费方式：<b>按单元面积</b></span>
            <span v-if="getCtPrevData.contactType.active == 'WR'">计费方式：<b>工位个数</b></span>
            <span v-if="getCtPrevData.contactType.active == 'ER'">租赁面积：<b>{{utAge | toFixed2}}m²</b></span>
            <span v-if="getCtPrevData.contactType.active == 'WR'">工位个数：<b>{{wpNum}}个</b></span>
            <span>车位数：<b>{{stNum}}个</b></span>
          </div>
          <div class="dy-flex ct-rd-in border-b">
            <div class="dy-fx-1 pt-8 pb-8">
              <span>租金单价：</span>
              <input type="number" class="form-control w-1" v-model="oPrice" @blur="calculateRent(oPrice,1)" />
              <hl-select :data="setUnit[setUnit.active].list" v-model="setUnit.nIndex" type="primary" width="150"
                @on-change="setUnitGr"></hl-select>
            </div>
            <div class="dy-fx-1 border-l pt-8 pb-8 dy-flex">
              <span style="margin-right: 43px;">日租金：</span>
              <input type="number" class="form-control w-1" v-model="dRent" @blur="calculateRent(dRent,2)" /> 元/天
              <i class="alert-mes" v-if="dayRentPriceAlert">({{dayRentPriceAlert}})</i>
            </div>
          </div>
          <div class="dy-flex ct-rd-in border-b">
            <div class="dy-fx-1 pt-8 pb-8 dy-flex">
              <!-- <span style="line-height: 34px">月租金计算方式：</span>
              <hl-radio :data="setRent.list" v-model="setRent.active"
                @on-click="hidebillPlan('Y', rentBill.bet , 'bet')"></hl-radio> -->
            </div>
            <div class="dy-fx-1 pt-8 pb-8 dy-flex" v-show="setRent.active.join('') == 'M'">
              <span style="margin-right: 43px;">月租金：</span>
              <input type="number" class="form-control w-1" v-model="mRent" @blur="calculateRent(mRent,3)" />
              元/月
              <i class="alert-mes" v-if="monthRentPriceAlert">({{monthRentPriceAlert}})</i>
            </div>
          </div>

          <div class="dy-flex ct-rd-in rent-container" style="margin:0">
            <div class="dy-fx-1 pt-8 pb-8">
              <span>付款周期：</span>
              <b>付</b>
              <input type="number" class="form-control" style="width:45px;" v-model="rentBill.pay" /> 月
            </div>
          </div>
        </div>
      </div>
      <div class="section_title" style="margin-bottom: 10px;">分摊日期</div>
      <div class="dy-flex">
        <hl-radio :data="radioList" v-model="radioVal"></hl-radio>
        <input type="number" class="form-control w-1" v-model="freeDays" />
      </div>
      <!-- 阶梯租金 -->
      <!-- <div class="JTZJ" v-if="haveGDflag && isGDZJflag ">
        <div class="section_title">
          <span>阶梯租金</span>
          <div @click="addJTZJ"><b class="icon-Org-account"></b>新增</div>
        </div>
        <div v-if="rentLadder.length">
          <div class="dy-flex" style="align-items: center">
            <p style="margin-right: 20px">递增时间：</p>
            <hl-radio :data="ladderRentArr" v-model="ladderRentActive"></hl-radio>
          </div>
          <div class="ct-ladder-wrap mt-15 border">
            <ul class="dy-flex ct-ladder-list bg-filter border-b color-gray">
              <li class="dy-fx-2">阶梯开始时间</li>
              <li class="dy-fx-1">递增率(%)</li>
              <li class="dy-fx-2">租金单价({{setUnit[setUnit.active].list[setUnit.nIndex.join('')].name}})</li>
              <li class="dy-fx-2">日租金(元/天)</li>
              <li class="dy-fx-2">月租金(元/月)</li>
              <li class="dy-fx-1">操作</li>
            </ul>
            <ul class="dy-flex ct-ladder-list border-b entry_list" v-for="(item,index) in rentLadder">
              <li class="dy-fx-2">
                <web-calendar id="specialbox1" v-model="item.time"
                  :beforedate="index > 0 ? rentLadder[index-1].time : ''">
                </web-calendar>
              </li>
              <li class="dy-fx-1"><input type="number" v-model="item.lv" @blur="calculateRentLd(item.lv, index, 1)">
              </li>
              <li class="dy-fx-2"><input type="number" v-model="item.dj" @blur="calculateRentLd(item.dj, index, 2)">
              </li>
              <li class="dy-fx-2"><input type="number" v-model="item.rz" @blur="calculateRentLd(item.rz, index, 3)">
              </li>
              <li class="dy-fx-2"><input type="number" v-model="item.yz" @blur="calculateRentLd(item.yz, index, 4)">
              </li>
              <li class="dy-fx-1" @click="delJTZJ(index)"><a>删除</a></li>
            </ul>
          </div>
        </div>
      </div> -->
      <!-- 免租期 -->
      <!-- <div class="MZQ">
        <div class="section_title">
          <span>免租期/装修期</span>
          <div @click="addMZQ"><b class="icon-Org-account"></b>新增</div>
        </div>
        <div v-if="freePeriod.length">
          <div class="ct-ladder-wrap mt-15 border">
            <ul class="dy-flex ct-ladder-list bg-filter border-b color-gray">
              <li class="dy-fx-2">免租/装修开始时间</li>
              <li class="dy-fx-2">免租/装修结束时间</li>
              <li class="dy-fx-1">操作</li>
            </ul>
            <ul class="dy-flex ct-ladder-list border-b entry_list" v-for="(item,index) in freePeriod">
              <li class="dy-fx-2" style="padding:0 10px;">
                <web-calendar type="primary" v-model="item.btime"
                  :beforedate="index > 0 ? freePeriod[index-1].etime : beginDate"></web-calendar>
              </li>
              <li class="dy-fx-2" style="padding:0 10px;">
                <web-calendar type="primary" v-model="item.etime" :beforedate="item.btime"></web-calendar>
              </li>
              <li class="dy-fx-1" @click="freePeriod.splice(index,1)"><a>删除</a></li>
            </ul>
          </div>
        </div>
      </div> -->

    </div>

    <button class="btn n-btn-outline mr-16" type="button" @click="createBillPlan(1)">生成</button>
    <section class="mb-12" style="margin-top: 20px;">
      <div class="dy-flex" style="align-items: center;margin-right: 60px;">
        <p>折扣后日租金：</p>
        <div>{{payData.rentDiscountDay || '--'}}</div>
      </div>
    </section>
    <section class="mb-12">
      <div class="dy-flex" style="align-items: center;margin-right: 60px;">
        <p>折扣后月租金：</p>
        <div>{{payData.rentDiscountMonth || '--'}}</div>
      </div>
    </section>
    <ul style="color: rgb(234, 142, 111);">
      <li>折扣计算公式：</li>

      <li>1）折扣周期折算成月后，月数为整数</li>
      <li class="mr-unm">折后日租金=折扣月租金*12/365</li>
      <li class="mr-unm">折后月租金=折扣周期租金金额/折扣周期月数</li>
      <li>2）折扣周期折算成月后，月数不为整数</li>
      <li class="mr-unm">折后日租金=折扣周期租金金额/折扣周期天数</li>
      <li class="mr-unm">折后月租金=折后日租金*365/12​</li>
    </ul>
  </div>
  </div>
</main>
<script src="modules/contract/scripts/discountCalculation.js" charset="utf-8"></script>